/* 
目标：react-路由 实现私有路由

业务讲解
1. 一个三个页面
2. `首页` 为公开页面
3. `个人中心` , `钱包` 为私有页面
4. 通过`redux` 管理全局用户凭据 `token`
5. 通过 `history.relace` 实现成功登录后跳转

*/
import React from 'react';

import { HashRouter as Router, Route, Link, Switch, Redirect } from "react-router-dom";

// 一个三个页面准备;
const Home = () => {
  return <h1>首页的内容</h1>;
};
const User = () => {
  return <h1>个人中心的内容</h1>;
};
const Wallet = () => {
  return <h1>钱包的内容</h1>;
};

// 模拟的 token 值，真正开发应该是从 仓库 中获取
let token = '';

// 登录页
const Login = (props) => {
  // 点击登录时候的业务
  const handleLogin = () => {
    // 真正的 token 应该是发请求获取的，获取成功要存到 仓库 中
    token = 'xxx';
    // 登录后，重定向回到原页面
    props.history.replace(props.location.state);
  };
  return <>
    <h1>登录页</h1>
    <button onClick={handleLogin}>点击登录</button>
  </>;
};

// 自己封装一个私有路由组件（名字随便起）
//    1. 如果没有 token 就跳转到登录页
//    2. 有 token 才能访问是有页面
const PrivateRoute = (props) => {
  if (!token) {
    // 没有 token 重定向到登录页的时候，需要传递两个数据，第一个为跳转到登录页，第二个记录跳转前的页面
    return <Redirect to={{ pathname: "/login", state: props.path }}></Redirect>;
  } else {
    // 有 token 把所有属性解构到 Route 上，Route 标签自动跳转
    return <Route {...props}></Route>;
  }
};

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <Router>
          <ul>
            <li><Link to='/'>首页</Link></li>
            <li><Link to='/user'>个人中心</Link></li>
            <li><Link to='/wallet'>钱包</Link></li>
          </ul>
          <Switch>
            <Route exact path='/' component={Home}></Route>
            {/* 两个需要有 token 才能访问的页面 */}
            <PrivateRoute path='/user' component={User}></PrivateRoute>
            <PrivateRoute path='/wallet' component={Wallet}></PrivateRoute>
            {/* 登录页，没有token的时候显示登录页 */}
            <Route path='/login' component={Login}></Route>
          </Switch>
        </Router>
      </div>
    );
  }
}

export default App;
